<script setup lang="ts">
import { onMounted, computed } from 'vue';
import { navigateTo, showLoading } from '@tarojs/taro';
import { QUERY_APP_FLOW_PATH_RECORD_LIST } from '/@/api/modules/flow-path/flow-path';
import { APPROVE_STATUE, APPROVE_STATUE_COLOR, APPROVE_STATUE_BG_COLOR } from '/@/common/constant';
import { approveState } from './state';
import { isJsonString } from '/@/utils/string-util';

onMounted(() => {
  refreshRecordList();
});

/**
 * @description 跳转到详情页面
 * @param item 点击的item项
 */
function jumpToDetailPage(item: FlowPathDto.RecordDto) {
  navigateTo({
    url: `/pages/my-approve/detail/index?id=${item.id}&from=send`,
  });
}

/**
 * 申请记录
 *@description 审批列表
 * @param page 当前页
 * @param pageSize -每页条数
 */
function queryFlowPathRecordList(page: number = 1, pageSize: number = 15) {
  if (!page && approveState.finished) return;
  approveState.loading = true;
  showLoading();
  QUERY_APP_FLOW_PATH_RECORD_LIST({
    comQuery: { page, pageSize },
    //会议预约审批流程
    templateCodeList: ['74719954-f360-4ef9-bf34-b49507fa70e6'],
    myHandleStatus: '3',
  })
    .then((res) => {
      approveState.loading = false;
      if (
        approveState.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      ) {
        approveState.finished = true;
      }
      if (!res.flowpathRecordDto || !res.flowpathRecordDto.length) return;
      res.flowpathRecordDto.forEach((item) => approveState.list.push(item));
      approveState.activePage += 1;
    })
    .catch(() => {
      approveState.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoadingRecord() {
  if (approveState.finished) return;
  queryFlowPathRecordList(approveState.activePage);
}

/**
 * 申请记录列表刷新
 */
function refreshRecordList() {
  approveState.activePage = 1;
  approveState.loading = true;
  approveState.finished = false;
  approveState.list = [];
  onLoadingRecord();
}

const displayAttributeValue = computed(() => {
  return (item: FlowPathTemplateApi.AttributeDto) => {
    if (item.attributeTypeName === 'radio' || item.attributeType === 6) {
      //单选项不为空才解析
      if (
        item.attributeOption &&
        item.attributeOption.length > 0 &&
        isJsonString(item.attributeOption)
      ) {
        const objArr: { name: string; value: string }[] = JSON.parse(item.attributeOption);
        const selectedItem = objArr.find((subItem) => subItem.value === item.attributeValue);
        return selectedItem?.name || '';
      }
    } else if (item.attributeTypeName === 'checkbox' || item.attributeType === 7) {
      //单选项不为空才解析
      if (
        item.attributeOption &&
        item.attributeOption.length > 0 &&
        isJsonString(item.attributeOption) &&
        item.attributeValue
      ) {
        const objArr: { name: string; value: string }[] = JSON.parse(item.attributeOption);
        const values = item.attributeValue.split(',');
        const radioValArr = objArr.filter((item) => values.includes(item.value));
        return radioValArr.map((item) => item.name).join(', ');
      }
    } else if (item.attributeTypeName === 'department' || item.attributeType === 11) {
      //单选项不为空才解析
      if (item.attributeValue && isJsonString(item.attributeValue)) {
        const deptObj: { id: string; name: string } = JSON.parse(item.attributeValue);
        return deptObj.name;
      }
    } else {
      return item.attributeValue;
    }
  };
});
</script>

<template>
  <scroll-view
    class="app-page__wrapper"
    :scroll-y="true"
    :lower-threshold="100"
    @scrolltolower="onLoadingRecord()"
  >
    <view class="approve-record__wrapper">
      <view
        class="approve-record__item"
        v-for="item in approveState.list"
        :key="item.id || ''"
        @click="jumpToDetailPage(item)"
      >
        <view class="approve-record__item__header">
          <view class="approve-record__item__header--left">
            <text>{{ item.title || '-' }}</text>
          </view>
          <view
            class="approve-record__item__header--right"
            :style="{
              color: item.status ? APPROVE_STATUE_COLOR[item.status] : '#999',
              backgroundColor: item.status ? APPROVE_STATUE_BG_COLOR[item.status] : '#999',
            }"
          >
            <text>{{ item.status ? APPROVE_STATUE[item.status] : '-' }}</text>
          </view>
        </view>
        <view v-for="attribute in item.attributes" :key="attribute.id">
          <text>{{ attribute.attributeName }}:&nbsp;&nbsp;</text>
          <!--如果属性为单选或者多选 要特殊处理 -->
          <text>{{ displayAttributeValue(attribute) }}</text>
        </view>
      </view>
    </view>
    <view class="app-page__list-tips">
      <text v-if="!approveState.list.length">暂无数据！</text>
      <text v-else-if="approveState.list.length && approveState.loading">加载中...</text>
      <text v-else-if="approveState.list.length && approveState.finished">加载完成!</text>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.approve-record {
  &__wrapper {
    padding: 20px;
  }

  &__item {
    background-color: #fff;
    color: #999;
    padding: 20px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: normal;
    word-break: break-all;
    &:last-child {
      margin-bottom: 20px;
    }
    &__header {
      display: flex;
      align-items: center;
      margin-bottom: 5px;

      &--left {
        padding-right: 20px;
        flex: 1;
        color: #333;
        font-size: 32px;
        font-weight: bold;
      }
      &--right {
        font-size: 20px;
        padding: 4px 12px;
        border-radius: 8px;
      }
    }
  }
}
</style>
